<template>
	<div class="container">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '申请开票' : ''" @click-left="handleBack" />
		<div class="postForm">
			<van-form ref="pushFormEle" label-width="100">
				<van-cell-group inset>
					<van-field required v-model="pushForm.price" name="price" label="发票金额" placeholder="请输入发票金额"
						:rules="[{ required: true, message: '请填写发票金额' }]" />

					<van-field required name="pushForm.images" label="证据图片"
						:rules="[{ required: true, message: '请上传证据图片' }]">
						<template #input>
							<van-uploader v-model="zhiImg" :file-list="zhiImg" :max-count="1" :limit="1"
								:after-read="afterRead">
								<template #preview-cover="scope">
									<div class="preview-cover van-ellipsis">
										{{ scope.name }}
									</div>
								</template>
							</van-uploader>
						</template>
					</van-field>
				</van-cell-group>
				<div class="getTicket">
					<van-button block @click="submitTicket" type="primary">立即提交</van-button>
				</div>
			</van-form>

		</div>

		<!-- 兑换规则 -->

	</div>
</template>

<script setup lang="ts">
	import {
		getCookie
	} from "@/utils/index";
	import {
		ref,
		reactive
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		isWeixin
	} from "@/utils/index";
	import {
		fapiaolist, fapiaoadd, uploadFileApi
	} from "@/api/user";
	import { showLoadingToast, showSuccessToast, showFailToast, showConfirmDialog, showToast } from 'vant';
	const router = useRouter();
	const route = useRoute();
	const price = ref();
	const zhiImg = ref([]);
	const pushFormEle = ref();
	const pushForm = reactive({
		uid: getCookie("token") ? Number(getCookie("token")) : "",
		price: '',
		images: ''
	});
	// // 获取推广信息
	// const getFapiao = async () => {
	// 	let result = await fapiaolist({
	// 		uid: getCookie("token") ? Number(getCookie("token")) : "",
	// 		status: status.value,
	// 		pageNo: pageNo.value,
	// 		pageSize: pageSize.value
	// 	});
	// 	fapiaoList.value = result.data;
	// };
	// getFapiao();
	// 订单截图
	const afterRead = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.images = res.data;
			} else {

			}
		}
		)
	};
	const submitTicket = () => {
		pushFormEle.value.validate().then(() => {
			let toast = showLoadingToast({
				message: '提交中...',
				loadingType: 'spinner',
				forbidClick: true,
				duration: 0
			});
			let req = {
				uid: pushForm.uid,
				price: parseFloat(pushForm.price),
				images: pushForm.images,
			}
			fapiaoadd(req).then((res) => {
				toast.close()
				if (res.code == 0) {
					showSuccessToast({
						message: '提交成功',
						duration: 1500,
						forbidClick: true,
						onClose: () => {
							router.back()
						}
					})
				} else {
					showFailToast(res.msg)
				}
			}
			)


		})
	}
	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};
	const goIncomeRecord = () => {
		router.push("/incomeRecord");
	}
</script>

<style>
	.postForm {
		margin-top: 60px;
	}
	.getTicket {
		width: 90%;
		margin: 20px auto;
	}
</style>